<template>
	<view :style="{height: uHeight + 'px'}">
		<view class="user-info flex" id="userInfo">
			<view class="headImg ">
				<u-avatar :src="userInfo.avatarUrl" mode="square"></u-avatar>

			</view>
			<text v-if="userId == ''" style="width: 600rpx;margin-left: 10rpx;font-weight: 600;"
				@click="goLogin()">未登录</text>
			<view class="phone text-center">
				<view class="" v-for="item in userInfo.mobile" :key="item.id" @longpress="delePhone(item.id)">
					<text>预留电话：</text>{{item.mobile}}
				</view>
			</view>
			<!-- #ifndef -->
			<view class="" v-if='buttonType === "big"'>
				<u-button open-type="share" type="warning" v-if="buttonShow" :custom-style="customStyle">邀请专属代招
				</u-button>
			</view>
			<!-- #endif -->

			<!-- <view class="" v-if='buttonType === "small"'>
				<view class="invitation-btn" v-if="buttonShow">邀请大招工中介加入(奖金1000)</view>
				<view class="invitation-btn" v-if="buttonShow" style="margin-top: 20upx;">邀请小招工中介加入(奖金100)</view>
			</view> -->
			<view class="flex" v-if='buttonType === "small"'>
				<!-- #ifdef MP-WEIXIN -->
				<view type="warning" class="botton d-btn btn fix-btn con-bottom" style="width: 220rpx;flex: 1;
		justify-content: center;height: 80rpx;line-height: 80rpx;border-radius: 10rpx;text-align: center;
		align-items: center;background-color: #ff9900;color: #FFFFFF;margin-right: 10rpx;font-size: 25rpx;"
					@click="toBigMiniProgram('wxbcdf7610dafa5fee')">
					切换到发布模式</view>
				<!-- #endif-->
				<u-button open-type="share" type="error" :custom-style="customStyle" shape="square"
					style="background-color: #FF0000;border-radius: 10rpx;">分享给朋友</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			buttonShow: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				customStyle: {
					'background': '#E04110',
					'border-color': '#E04110',
				},
				uHeight: 64,
				buttonType: uni.getStorageSync('role') || 'big',
				userId: uni.getStorageSync('userId')
			}
		},
		computed: {
			...mapState({
				userInfo: 'userInfo',
			})
		},
		watch: {
			userInfo(ns) {
				console.log('====>', ns)
				if (!ns) {
					this.getUheight()
				}
				this.userId = uni.getSystemInfoSync('userId')
			},
		},
		created() {
			this.getUheight()
		},
		onShow() {
			console.log(uni.getSystemInfoSync('userId'))
		},
		methods: {
			goLogin() {
				uni.navigateTo({
					url: "/pages/login"
				})
			},
			toBigMiniProgram(id) {
				uni.navigateToMiniProgram({
					appId: id,
					path: '/pages/index/index',
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			getUheight() {
				// const query = uni.createSelectorQuery().in(this);
				//             query.select('#userInfo').boundingClientRect(data => {
				//                 this.uHeight = data.height + 10
				//             }).exec();
			},
			delePhone(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个手机号吗？',
					success: data => {
						if (data.confirm) {
							this.$u.api.postDelMobile({
								id
							}).then(res => {
								if (res.status == true) {
									uni.showToast({
										title: '操作成功'
									})
									this.postGetAdminInfo()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			postGetAdminInfo() {
				return new Promise((resolve, reject) => {
					this.$u.api
						.postGetAdminInfo()
						.then(res => {
							if (res.status == true) {
								uni.setStorageSync('userPhone', res.data.phone);
								// this.$store.commit('commitUserId', res.data.id);
								uni.setStorageSync('userId', res.data.id);
								uni.setStorageSync('userInfo', res.data)
								this.$store.commit('commitUserInfo', res.data)
							}
							resolve();
						})
						.catch(err => {
							console.log(err);
							reject();
						});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text-center {
		text-align: center;
	}

	.user-info {
		position: fixed;
		top: 0;
		padding: 10upx 20upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		z-index: 99;

		.headImg {
			width: 100upx;
			height: 100upx;
			flex-shrink: 0;

			.img {
				border-radius: 100upx;
				width: 100upx;
			}
		}

		.phone {
			width: 320upx;
		}
	}

	.invitation-btn {
		background-color: #E04110;
		color: #FFFFFF;
		width: 280upx;
		padding: 10upx 20upx;
		text-align: center;
		border-radius: 10upx;
	}
</style>
